<template>
    <div class="login-pannel">
    <h1 class="title">后台管理系统</h1>
       <el-tabs type="border-card" stretch v-model='currentTab'>

    <el-tab-pane name="account">
        <template #label>
            <span><i class="el-icon-user-solid" style='padding'></i> 账号登录</span>
        </template>
        <LoginAccount ref='accountRef'/>
        </el-tab-pane>

     <el-tab-pane name="phone">
         <template #label>
             <span><i class="el-icon-mobile-phone"></i> 手机登录</span>
         </template>
            <LoginPhone ref='phoneRef'/>
     </el-tab-pane>
 
  </el-tabs>
    
     <div class='account-control'>
      <el-checkbox v-model='isKeepPassword'>记住密码</el-checkbox> 
      <el-link type='primary'>忘记密码</el-link> 
     </div>

      <el-button type="primary" class="login-btn" @click='handleLoginClick()'>立即登录</el-button>
    </div>
</template>

<script>
// import { Calendar } from '@element-plus/icons'
 import { ref } from 'vue'
import LoginAccount from './login-account'
import LoginPhone from './login-phone'
export default {
    components:{
        LoginAccount,
        LoginPhone
    },
    
    setup () {

        // 定义属性
        let isKeepPassword=ref(true)
        let accountRef=ref()     
         let phoneRef=ref()  
        const currentTab=ref('account')
        // 定义方法
       const handleLoginClick=()=>{
        //   console.log(accountRef.value);
        //  调用 组件的loginAction方法

        // 如果是账号登陆
           if(currentTab.value='account'){
                       accountRef.value?.loginAction(isKeepPassword.value)
           }else{
                 console.log('phopne');
           }
  
        }
        return {
            isKeepPassword,
            handleLoginClick,
            accountRef,
            currentTab,
            phoneRef
        }
    }
}
</script>

<style lang="less" scoped>
.login-pannel{
    margin-bottom: 150px;
    width: 400px;
    .title{
        text-align: center;
    }
    .account-control{
        display: flex;
        justify-content: space-between;
    }
    .login-btn{
        width: 100%;
        margin-top: 10px;
    }
}
</style>